.defined-name {
    display: flex;

    position: relative;

    transition: height 0.15s;

    border-right: 1px solid rgb(var(--border-color));

    height: 100%;

    width: 100px;

    box-sizing: border-box;

    &-drop-down {
        display: flex;
        align-items: center;
        justify-content: center;

        padding: 0 var(--padding-xs);

        cursor: pointer;

        position: absolute;

        right: 0;

        height: 100%;

        &:hover {
            background-color: rgb(var(--grey-50));
            color: rgb(var(--primary-color));
        }

        &-disable {
            color: rgb(var(--grey-200));
            cursor: not-allowed;

            &:hover {
                color: rgb(var(--grey-200));
            }
        }
    }

    &-overlay {
        position: relative;
        border: 1px solid rgb(var(--border-color));
        width: 300px;
        background-color: rgb(var(--color-white));
        transform: translateX(-75px);

        &-container {
            position: relative;
            height: 100%;
            max-height: 400px;
            width: 100%;
            overflow: hidden;
            overflow-y: auto;
            scrollbar-color: rgba(var(--scrollbar-color), 0.7) transparent;
            scrollbar-gutter: auto;
            scrollbar-width: thin;
        }

        &-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--padding-xs);
            border-bottom: 1px solid rgb(var(--border-color));
            user-select: none;
            cursor: pointer;

            &:hover {
                background-color: rgb(var(--grey-50));
            }

            &-name {
                font-size: var(--font-size-md);
                color: rgb(var(--grey-900));
                margin: 5px 0px;
                overflow: hidden;
                text-overflow: ellipsis;
                flex: 1;

                &-for-sheet {
                    font-size: var(--font-size-xxs);
                    color: rgb(var(--grey-400));
                    margin-left: 5px;
                    font-weight: normal;
                }
            }

            &-formula {
                font-size: var(--font-size-xs);
                color: rgb(var(--grey-800));
                margin: 5px 0px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                flex: 1;
            }
        }

        &-manager {
            position: absolute;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            width: 100%;
            cursor: pointer;
            overflow: hidden;
            background-color: rgb(var(--color-white));

            &:hover {
                background-color: rgb(var(--grey-50));
            }

            &-title {
                font-size: var(--font-size-xs);
                font-weight: bold;
                margin: var(--margin-xs);
                margin-bottom: 0;
                color: rgb(var(--grey-800));
            }

            &-content {
                font-size: var(--font-size-xxs);
                margin: var(--margin-xs);
                color: rgb(var(--grey-500));
            }
        }
    }

    &-container {
        width: 100%;
        position: relative;

        &-scroll {
            width: 100%;
            overflow: hidden;
            overflow-y: auto;
            position: absolute;
        }

        &-addButton {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 40px;
            border-top: 1px solid rgb(var(--border-color));
            border-bottom: 1px solid rgb(var(--border-color));
            font-size: var(--font-size-md);

            color: rgb(var(--primary-color));

            &:hover {
                background-color: rgb(var(--grey-50));
                cursor: pointer;
            }

            &-text {
                margin-left: 5px;
            }
        }

        &-item {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--padding-xs);
            border-bottom: 1px solid rgb(var(--border-color));
            user-select: none;
            cursor: default;

            &-name {
                font-size: var(--font-size-sm);
                font-weight: 500;
                color: rgb(var(--color-black));
                margin: 5px 0px;
                max-width: 190px;
                max-height: 100px;
                overflow: hidden;

                &-for-sheet {
                    font-size: var(--font-size-xxs);
                    color: rgb(var(--grey-400));
                    margin-left: 5px;
                    font-weight: normal;
                }
            }

            &-formula-or-refString {
                font-size: var(--font-size-xs);
                color: rgb(var(--grey-500));
                font-weight: 400;
                margin: 5px 0px;
                max-height: 100px;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            &-update {
                position: absolute;
                font-size: var(--font-size-xs);
                color: rgb(var(--primary-color));
                cursor: pointer;
                padding: 4px;

                &:hover {
                    background-color: rgb(var(--hyacinth-50));
                }

                transform: translate(0, -50%);
                border-radius: var(--border-radius-base);
                right: 60px;
                top: 20px;
            }

            &-delete {
                position: absolute;
                font-size: var(--font-size-xs);
                color: rgb(var(--error-color));
                cursor: pointer;
                padding: 4px;
                right: 20px;
                top: 20px;
                transform: translate(0, -50%);
                border-radius: var(--border-radius-base);

                &:hover {
                    background-color: rgb(var(--hyacinth-50));
                }
            }

            &-show {
                display: none;
            }

            &:hover {
                background-color: rgb(var(--grey-50));

                .defined-name-container-item-show {
                    display: block;
                }
            }
        }
    }

    &-input {
        display: flex;
        align-items: center;
        justify-content: left;
        border-bottom: 1px solid rgb(var(--border-color));
        padding-bottom: 5px;

        & > div {
            // check docs-ui/src/components/editor/index.module.less .text-editor-validation-error
            margin-top: 16px;
        }

        // univer-defined-name-input
        &-formula-selector-text-wrap {
            margin-top: 16px;
            height: 100%;
            position: relative;
            padding: 0 0 0 6px;
            border: 1px solid rgb(var(--border-color));
            transition: all 0.15s;
            border-radius: var(--border-radius-base);
        }

        &-text-editor-container {
            position: relative;
            width: 95%;
            height: 30px;
            user-select: none;
        }

        &-validation {
            display: flex;
            align-items: center;
            justify-content: left;
            color: rgb(var(--error-color));
            font-size: var(--font-size-xs);

            & > span {
                margin-right: 2px;
            }
        }

        &-disable {
            color: rgb(var(--grey-200));
            cursor: not-allowed;
        }
    }
}
